vue学习笔记

一.环境搭建

1.全局安装官方脚手架 vue-cli,脚手架安装成功后可以通过 vue -V来查看版本，如果显示版本号。说明安装成功了。

 npm install -g @vue/cli

2.创建项目 vue-learn 为项目名，可自定义。

vue create vue-learn

3.项目成功之后执行进入项目所在的文件夹并启动项目。项目启动成功之后会看到两个地址一个local 一个Network。本地调试的时候打开loca即可

cd vue-learn 
npm run serve

二.模板语法
1.普通文本

<h1>{{ msg }}</h1>

2.需要解析的html,比如通过富文本编辑器提交的内容。利用v-html指令。msg里面的内容会被解析到这个div里面

<div v-html='msg'></div>

3.自定义指令 directive.比如说我们想在数字面前加上钱的符号，$ 或者 ￥。我们可以这样做。

在 components文件夹下新建一个文件叫 d.js。代码如下。

import Vue from 'vue'
let getOptions = function(type) {
   return {
    bind: function (el, binding) {
        el.textContent = type + binding.value
    },
    update: function (el, binding) {
        el.textContent =type + binding.value
    }
  }
}
Vue.directive('md',getOptions('$'))

Vue.directive('mr',getOptions('￥'))

Vue.directive() 接受两个参数：
1).指令名,如上的md和mr。这个参数类似默认指令里v-if里的if。
2).一个对象。这个对象里面会有一些方法，bind,update等。这些都不是自定义的，都是框架自身的，直接用就可以。这些方法(bind等)接收一些参数，如el(指令所在的dom元素),binding(包含一些信息)。具体可以去看文档。

自定义指令如何使用
1).可以在App.vue里引入

import './components/d.js'

2).在需要组件里可以直接使用，需要注意的是使用的时候必须加上v-前缀

 <div v-md='m'> </div>
 <div v-mr='m'></div>


data() {
    return {
      m:'333333333'
    }
  }

---

更新时间 2018年12月10日。

---

三.计算属性的简单使用。
计算属性的应用场景：具有依赖关系的数据简体。
下面举一个简单的例子：
假设你欠了别人100(money)块钱,还了5(a)块钱。你想知道还需要还多少钱。下面的方式是使用表达式的方式实现的

<div>还需要还多少钱：{{money-a}}</div>

  data() {
    return {
      money:100,
      a:5
    }
  }

当然也可以使用计算属性。在computed里面定义一个函数，这个函数会return一个值。

<div>还需要还多少钱：{{funB}}</div>
data() {
    return {
      money:1001,
      a:5
    }
  },
  computed:{
    funB:function(){
      return this.money-this.a
    }
  }